<template>
  <div class="container">
    <div class="bpmn-viewer">
      <vue-header
        class="bpmn-viewer-header"
        :processData="initData"
        :modeler="bpmnModeler"
        :row="row"
        @restart="restart"
        @handleExportSvg="handleExportSvg"
        @handleExportBpmn="handleExportBpmn"
        @processSave="processSave"
      ></vue-header>
      <div class="bpmn-viewer-container">
        <div class="bpmn-viewer-content" ref="bpmnViewer"></div>
      </div>
    </div>
    <bpmn-panel
      ref="bpmnPanel"
      v-if="bpmnModeler"
      :modeler="bpmnModeler"
      :process="initData"
      :dataDetails="dataDetails"
    ></bpmn-panel>
  </div>
</template>

<script>
import { workflow } from "@/api/index";
import templateXml from "./data/template";
import BpmnModeler from "jeeplus-bpmn/lib/Modeler";
import customTranslate from "./data/translate/customTranslate";
import VueHeader from "./Header";
import BpmnPanel from "./panel/index";
import activitiModele from "./data/activiti.json";
import flowableModdle from "./data/flowable.json";
import "./assets/css/font-awesome.min.css";

export default {
  name: "VueBpmn",
  data() {
    return {
      bpmnModeler: null,
      initTemplate: "",
      initData: {},
      canvas: "",
      dataDetails: [], // 节点回显的数据
    };
  },
  props: {
    product: String,
    row: Object,
  },
  watch: {
    bpmnModeler: {
      handler() {
        if (this.bpmnModeler) {
          setTimeout(() => {
            this.$refs.bpmnPanel.handleModeler();
          }, 50);
        }
      },
    },
  },
  components: {
    VueHeader,
    BpmnPanel,
  },
  mounted() {},

  methods: {
    init(row) {
      // 获取回显数据
      this.getToFormData(row.processDefId);
      this.bpmnModeler = null;
      this.initTemplate = templateXml.initTemplate(
        this.row.processDefCode,
        this.row.processDefName
      );
      this.initData = {
        id: this.row.processDefCode,
        name: this.row.processDefName,
        xml: this.initTemplate,
      };
      this.row = row;
      // 支持activiti和flowable
      let _moddleExtensions = this.getModdleExtensions();
      // 获取画布 element
      let canvas = "";
      canvas = this.$refs.bpmnViewer;
      // 清除上次的痕迹
      canvas.innerHTML = "";
      // 创建Bpmn对象
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        additionalModules: [
          {
            translate: ["value", customTranslate],
          },
        ],
        moddleExtensions: _moddleExtensions,
      });
      this.getbpm(row.processDefId);
      
    },
    // 获取回显数据
    getToFormData(processDesignId) {
      const self = this;
      let data = {
        modelId: processDesignId,
      };
      workflow.getDetailsByDesignId(data).then((res) => {
        self.dataDetails = res.datas.nodeVars;
        this.initData = Object.assign({}, this.initData, res.datas.processVars);
      });
    },
    // 根据id获取流程模型编辑器
    getbpm(processDesignId) {
      const self = this;
      let data = {
        processDesignId: processDesignId,
      };
      workflow.getProcessDesignById(data).then((res) => {
        self.initDiagram(res.data.bpmnXml);
      });
    },
    initDiagram(xml) {
      const xmls = this.initTemplate;
      if (!xml) {
        let _tag = document.getElementsByClassName(
          "djs-direct-editing-parent"
        )[0];
        if (_tag) {
          _tag.style.display = "none";
        }
      }
      const bpmnXmlStr = xml ? xml : xmls;
      console.log(bpmnXmlStr, "bpmnXmlStr989898");
      this.bpmnModeler.importXML(bpmnXmlStr, (err) => {
        if (err) {
          this.$Message.error("打开模型出错,请确认该模型符合Bpmn2.0规范");
        } else {
          console.log("成功");
          //   setTimeout(() => {
          //   this.$refs.bpmnPanel.handleModeler();
          // }, 50);
        }
      });
    },
    handleExportBpmn() {
      const _this = this;
      this.bpmnModeler.saveXML(function (err, xml) {
        if (err) {
          console.error(err);
        }
        let { filename, href } = _this.setEncoded("BPMN", xml);
        if (href && filename) {
          let a = document.createElement("a");
          a.download = filename; //指定下载的文件名
          a.href = href; //  URL对象
          a.click(); // 模拟点击
          URL.revokeObjectURL(a.href); // 释放URL 对象
        }
      });
    },
    handleExportSvg() {
      const _this = this;
      this.bpmnModeler.saveSVG(function (err, svg) {
        if (err) {
          console.error(err);
        }
        let { filename, href } = _this.setEncoded("SVG", svg);
        if (href && filename) {
          let a = document.createElement("a");
          a.download = filename;
          a.href = href;
          a.click();
          URL.revokeObjectURL(a.href);
        }
      });
    },
    setEncoded(type, data) {
      const encodedData = encodeURIComponent(data);
      if (data) {
        if (type === "XML") {
          return {
            filename: "diagram.bpmn20.xml",
            href: "data:application/bpmn20-xml;charset=UTF-8," + encodedData,
            data: data,
          };
        }
        if (type === "BPMN") {
          return {
            filename: "diagram.bpmn",
            href: "data:application/bpmn20-xml;charset=UTF-8," + encodedData,
            data: data,
          };
        }
        if (type === "SVG") {
          this.initData.svg = data;
          return {
            filename: "diagram.svg",
            href: "data:application/text/xml;charset=UTF-8," + encodedData,
            data: data,
          };
        }
      }
    },
    processSave(data) {
      let initData = this.initData;
      data.processDesignCode = initData.id;
      data.processDesignName = initData.name;
      this.$emit("processSave", data);
    },
    restart() {
      let _tag = document.getElementsByClassName("djs-direct-adding-parent")[0];
      if (_tag) {
        _tag.style.display = "none";
      }
      this.initTemplate = templateXml.initTemplate(
        this.row.processDefCode,
        this.row.processDefName
      );
      this.initData = {
        id: this.row.processDefCode,
        name: this.row.processDefName,
        xml: this.initTemplate,
      };
      this.initDiagram(this.initTemplate);
    },
    getModdleExtensions() {
      let moddleExtensions = {};
      if (this.product == "flowable") {
        moddleExtensions = {
          flowable: flowableModdle,
        };
      }
      if (this.product == "activiti") {
        moddleExtensions = {
          activiti: activitiModele,
        };
      }
      return moddleExtensions;
    },
  },
};
</script>

<style scoped>
.bjs-powered-by {
  display: none;
}
.djs-palette {
  top: 0;
  left: 0;
}
.djs-palette.two-column.open {
  width: 48px;
}
.container {
  display: flex;
}
.bpmn-viewer {
  flex: 1;
}
.bpmn-viewer-header {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  background: #f8f8f8;
}
.bpmn-viewer-container {
  padding: 10px;
  height: 100%;
}
.bpmn-viewer-content {
  width: 100%;
  height: 100%;
  min-height: 700px;
  background: url("")
    repeat !important;
}
.el-collapse-item__header {
  padding-left: 15px;
}
.djs-direct-editing-parent {
  /*display: none;*/
}
.bpmn-panel {
  width: 550px;
  border: 1px solid #eeeeee;
  padding: 0 5px;
}
.el-select--small {
  width: 100%;
}
.el-dialog > .el-dialog__header {
  padding: 5px 20px;
}
.el-dialog > .el-dialog__body {
  padding: 0px;
  margin: 0 20px;
  border: 1px solid #cccccc;
}
.default-undo {
  color: #c0c4cc;
}
</style>
